<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>在组件上使用 v-for</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <div id="todo-list-example">
            <form v-on:submit.prevent="addNewTodo">
                <label for="new-todo">Add a todo</label>
                <input
                    v-model="newTodoText"
                    id="new-todo"
                    placeholder="E.g. Feed the cat">
                <button>Add</button>
            </form>
            <ul>
                <li
                    is="todo-item"
                    v-for="(todo, index) in todos"
                    v-bind:key="todo.id"
                    v-bind:title="todo.title"
                    v-on:remove="todos.splice(index, 1)"></li>
            </ul>
        </div>
        <!-- 
        注意这里的 is="todo-item" attribute。
        这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。
        这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。
        查看 DOM 模板解析说明 来了解更多信息。
       -->
        <script>
        Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})
      </script>
    </body>
</html>